<template>
  <div id="app">
    <!--card
      当type为add时;name和tel不具备任何实际意义
      当type为edit时;add-text不具备任何实际意义
    -->

    <!--<van-contact-card
        @click="handleC"
        type="edit"
        name="达姆"
        tel="1585180277"
        add-text="add"></van-contact-card>-->

    <!--html中的规范 对于一个自定义的HTML标签 大部分情况是不支持自合闭的写法-->
    <!--<van-contact-list
      default-tag-text="xxxxxx"
      add-text="xjlxr"
      v-model="id"
      :list="list"
      @add="addFn"
      @edit="editFn"
      @select="selectFn"
      ></van-contact-list>-->

    <!--is-edit: 控制要不要显示删除按钮
      true: 显示
      false:不显示-->

    <van-contact-edit
        :contact-info="list[0]"
        :is-edit="true"
        :is-saving="false"
        :is-deleting="false"
        :tel-validator="validator"
        :show-set-default="true"
        set-default-label="设置为默认联系人"
        @save="saveFn"
        @delete="deleteFn">
    </van-contact-edit>
  </div>
</template>

<script>
  import { ContactCard, ContactList, ContactEdit } from 'vant';
  export default {
    name: 'App',
    data(){
      return {
        id:0,
        list:[
          {id:10,name:"damu",tel:"15851802713",isDefault:true},
          {id:11,name:"laofu",tel:"1383838438"},
        ]
      }
    },
    methods:{
      handleC(){console.log("handleC")},
      addFn(){console.log("addFn")},
      editFn(item,index){console.log("editFn",item,index)},
      selectFn(item,index){console.log("selectFn",item,index)},
      validator(tel){
        //在点击保存按钮时调用
        //tel是用户输入的电话号码
        //任何类型的数据都可以通过
        return true
      },
      saveFn(content){
        console.log(content);
      },
      deleteFn(content){
        console.log(content);
      }
    },
    components:{
      [ContactCard.name]:ContactCard,
      [ContactList.name]:ContactList,
      [ContactEdit.name]:ContactEdit
    },
    mounted(){
      //在cardlist组件中 如果点击选中的小按钮 select事件会被触发两次
      var vanRadio = document.querySelectorAll(".van-radio");
      vanRadio.onclick = function (ev) {
        ev = ev||event;
        ev.stopPropagation();
      }
    }
  }
</script>

<style scoped>

</style>
